<template>
  <div>
    <div class="container">
      <el-container v-loading="loading">
        <!-- 个人主页及菜单栏部分 -->
        <el-aside width="70px">
          <!-- 用户菜单部分 -->
          <menu-list @menuType='switchMenu'
                     :selfInfo='selfInfo'></menu-list>
        </el-aside>

        <!-- 用户和群组显示部分 -->
        <el-aside width="180px"
                  v-if="centerShow === 'init' || centerShow === 'message' || centerShow === 'friends' || centerShow === 'group'"
                  style="border-right: 1px solid #9195a323;">
          <!-- 搜索框 -->
          <div class="usersearch">
            <!-- <el-input placeholder="请输入内容"
                      prefix-icon="el-icon-search"
                      size="mini"
                      class="search"
                      clearable
                      v-model="searchSome">
            </el-input> -->
            <el-autocomplete class="inline-input"
                             style="width:130px;"
                             v-model="searchSome"
                             :fetch-suggestions="querySearch"
                             placeholder="搜索点什么"
                             @select="handleSelect"
                             size="mini"></el-autocomplete>
            <!-- 添加按钮 -->
            <span class="el-icon-plus searchbtn"
                  @click="centerShow = 'add-box', rightShow = 'add-box'"></span>
          </div>

          <!-- 消息列表 -->
          <latest-msg v-if="centerShow==='message'"
                      :latestMsg="latestMsg"
                      @reviseToUser="reviseToUserFromMsg"></latest-msg>
          <!-- 好友列表 -->
          <friends v-if="centerShow === 'friends'"
                   @newfriend="rightShow = 'newfriend';getnewFriendFun()"
                   @reviseToUser="reviseToUser"
                   :friendList="friendList"></friends>

          <group v-if="centerShow === 'group'"
                 @group="groupEvent"
                 @reviseToGroup="reviseToGroup"
                 @refreshGroup="getAllManageGroupData"
                 :groupManageData="groupManageData"
                 :groupJoinData="groupJoinData"></group>

        </el-aside>

        <!-- 主页部分 -->
        <el-main v-show="rightShow === 'Msgbox' || rightShow === 'newfriend' || rightShow === 'newGroup' || rightShow === 'createGroup'">
          <!-- 聊天盒子 rightShow === 'message-box'-->
          <message-box v-show="rightShow==='Msgbox'"
                       :toUserInfo='toUserInfo'
                       :toUserMsg="toUserMsg"
                       :selfInfo="selfInfo"
                       :groupOrFriendFlag="groupOrFriendFlag"
                       :toGroupInfo="toGroupInfo"
                       :toGroupMsg="toGroupMsg"
                       :queryCallDialog_="queryCallDialog"
                       :toUserID_="toUserID"
                       :nickName_="nickName"
                       :callDialogVisible_="callDialogVisible"
                       :centerShow="centerShow"
                       @endCall='endCall'
                       @refreshFriend='getFriendList'
                       @refreshGroup="getAllJoinGroupData(),getAllManageGroupData()"
                       @refreshNickname="refreshNickname"
                       @refreshFriendHistoryMsg="refreshFriendHistoryMsg"
                       @refreshGroupHistoryMsg="refreshGroupHistoryMsg"
                       @closeRightPanel="rightShow='init'"
                       @resetQueryDialog="queryCallDialog=false"></message-box>
          <!-- 新朋友消息的盒子 -->
          <new-friend v-if="rightShow === 'newfriend'"
                      :newFriendData="addfriendmsg"
                      @refresh="getnewFriendFun"></new-friend>

          <!-- 新的群的盒子 -->
          <new-group v-if="rightShow === 'newGroup'"
                     :addGroupMsg="addGroupMsg"
                     @getAddGroupMsg="getAllAddGroupMsg"
                     @refresh="getAllAddGroupMsg"></new-group>
          <create-group v-if="rightShow === 'createGroup'"
                        @refreshGroup="refreshGroup"></create-group>
        </el-main>

        <!-- 添加好友和添加群组盒子 rightShow === 'add-box' -->
        <add v-if="centerShow === 'add-box' & rightShow === 'add-box'"
             @backtomain="centerShow = nowmenu, rightShow = nowRightMenu"></add>
        <!-- 修改个人信息 -->
        <!-- <update-self v-if="centerShow === 'setting'"
                     :selfInfo="selfInfo"
                     @refresh='getSelfInfo'></update-self> -->
        <setting v-if="centerShow === 'setting' & rightShow === 'setting'"></setting>
      </el-container>
    </div>

  </div>
</template>

<script>
import MenuList from '../components/MenuList.vue'

import LatestMsg from '../components/LatestMsg.vue'

import MessageBox from '../components/MessageBox.vue'

import Friends from '../components/Friends.vue'

import Add from '../components/add/Add.vue'

// import UpdateSelf from '../components/update/UpdateSelfInfo.vue'

import NewFriend from '../components/newFriendOrGroup/NewFriend.vue'

import Group from '../components/Group.vue'

import NewGroup from '../components/newFriendOrGroup/NewGroup.vue'

import CreateGroup from '../components/newFriendOrGroup/CreateGroup.vue'

import Setting from '../components/manage/Setting.vue'

// this.$options.sockets.onmessage = (data) => console.log(data)

export default {
  components: {
    LatestMsg,
    MenuList,
    MessageBox,
    Friends,
    Add,
    // UpdateSelf,
    NewFriend,
    Group,
    NewGroup,
    CreateGroup,
    Setting
  },
  data () {
    return {
      searchSome: '',
      centerShow: 'init',
      rightShow: 'init',
      // 当前菜单
      nowmenu: 'init',
      // 当前右边菜单
      nowRightMenu: 'init',
      // 自己的相关信息
      selfInfo: {},
      // 是否通过退出按钮退出界面
      backflag: false,
      // 添加好友的消息
      addfriendmsg: [],
      // 好友分组用户列表
      friendList: [],
      // 加载数据等待
      loading: false,
      // 当前聊天对象的个人信息
      toUserInfo: {},
      // 所有聊天对象的信息
      allMsg: [],
      // 当前聊天对象的消息
      toUserMsg: [],
      // 添加群组的消息
      addGroupMsg: [],
      // 自己的管理群分组数据
      groupManageData: [],
      // 自己加入的群的数据
      groupJoinData: [],
      // 当前聊天对象为朋友还行群
      groupOrFriendFlag: 'friend',
      // 当前聊天群的信息
      toGroupInfo: {},
      // 所有群的消息
      allGroupMsg: [],
      // 当前聊天群的消息
      toGroupMsg: [],
      // 以下均为视频聊天相关控制函数
      // 询问弹窗
      queryCallDialog: false,
      // 对方的id值
      toUserID: '',
      // 对方的昵称
      nickName: '',
      // 打电话的弹窗
      callDialogVisible: false,
      // 在消息面板显示最新的消息
      latestMsg: [],
      // 在搜索框的一些信息
      searchInfo: []
      // 新消息的标记

    }
  },
  created () {
    this.loading = true
    // 得到自己的相关信息
    this.getSelfInfo()

    // 加载好友列表
    this.getFriendList()

    // 加载所有好友的消息
    this.getAllMsg()

    // 得到所有的自己管理的群分组的消息
    this.getAllManageGroupData()

    // 得到所有的自己加入的群分组的消息
    this.getAllJoinGroupData()

    // 得到所有的群聊消息
    this.getSelfAllGroupMsg()

    // websocket监听消息
    this.$socket.onmessage = (e) => {
      // 得到消息
      const data = JSON.parse(e.data)
      // 新朋友的消息
      if (data.type === 'newfriend') { // 别人申请和你成为好朋友了,刷新分组
        this.addfriendmsg.push(data.data)
      } else if (data.type === 'refreshFriends') {
        this.getFriendList()
        this.$message.success(data.data + '和你成为了好友，可以开始聊天啦~')

        // 在全部消息中增加一个消息
        var obj = {
          toUser: data.data,
          messages: []
        }
        this.allMsg.push(obj)
        // 将新的好友加入
      } else if (data.type === 'newMsg') { // 如果得到了新的好友消息，就添加对应的数据
        // 是自己发的消息
        if (data.data.m_FromUserID === this.selfInfo.u_LoginID) {
          this.allMsg.forEach(element => {
            if (element.toUser === data.data.m_ToUserID) {
              element.messages.push(data.data)
            }
          })

          if (this.toUserInfo.loginID === data.data.m_ToUserID) {
            this.toUserMsg.push(data)
          }
        } else { // 自己接受到别人发送的消息
          this.allMsg.forEach(element => {
            if (element.toUser === data.data.m_FromUserID) {
              element.messages.push(data.data)
            }
          })

          if (this.toUserInfo.loginID === data.data.m_FromUserID) {
            this.toUserMsg.push(data)
          }
        }

        // 将这个最新的消息插入到消息面板开头位置
        // 检查消息面板中是否已经存在了这个用户的消息，若存在，则删除
        var i = 0
        var id = data.data.m_FromUserID === this.selfInfo.u_LoginID ? data.data.m_ToUserID : data.data.m_FromUserID

        for (i = 0; i < this.latestMsg.length; i++) {
          if (this.latestMsg[i].m_ToUserID === id || this.latestMsg[i].m_FromUserID === id) {
            this.latestMsg.splice(i, 1)
            break
          }
        }

        this.latestMsg.unshift(data.data)
      } else if (data.type === 'newAddGroupMsg') { // 有别人申请你的群
        this.getAllAddGroupMsg()
      } else if (data.type === 'refreshGroups') { // 同意了某个群的申请或者取消了某个群的申请
        this.getAllAddGroupMsg()
        // 刷新群的相关信息
        this.getAllJoinGroupData()
        this.getAllManageGroupData()
        this.$message.success(data.msg)
        var objj = {
          groupID: data.groupID,
          messages: []
        }
        this.allGroupMsg.push(objj)
      } else if (data.type === 'newGroupMsg') { // 得到某个群聊消息
        // 修改所有数据中的消息
        this.allGroupMsg.forEach(element => {
          if (element.groupID === data.data.m_ToUserID) {
            element.messages.push(data.data)
          }
        })
      } else if (data.type === 'videoPhone') { // 视频聊天的请求
        if (data.action === 'connect') {
          // 打开弹窗 询问是否进行通话
          this.queryCallDialog = true
          this.toUserID = data.toUserID
          this.nickName = data.nickName
          this.$message.success('通话建立成功')
          // 对方同意进行通话
        } else if (data.action === 'agree') {
          this.callDialogVisible = true
          this.$message.success('点击按钮，拨打电话')
          // 对方不同意
        } else if (data.action === 'reject') {
          this.$message.info('对方忙，暂时无法接听')
          this.endCall()
        } else if (data.action === 'cancel') {
          this.endCall()
          this.$message.info('对方关闭了通话')
        }
      } else if (data.type === 'refreshSelfInfo') { // 重新请求自己的个人信息
        // 重新请求自己的个人信息
        this.getSelfInfo()
        // 重新请求自己的朋友聊天消息
        this.getAllMsg()
        // 重新请自己的群组消息
        this.getSelfAllGroupMsg()
      }
    }

    // 加载数据结束 没看到啥效果，后面再解决吧
    this.loading = false
  },
  destroyed () {
    // 浏览器关闭时，修改用户登录状态，销毁session和关闭socket
    if (!this.backflag) { this.setOffline() }
    window.sessionStorage.clear()
  },
  methods: {
    switchMenu (type) {
      if (type !== 'logout') {
        this.centerShow = type
        // 切换
        if (type === 'message' || type === 'friends' || type === 'group') {
          // 当前菜单类型
          this.nowmenu = type
          this.nowRightMenu = this.rightShow
        } else if (type === 'setting') this.rightShow = type
      } else {
        // 若是点击了退出按钮，则销毁session,关闭socket连接，进入到登录界面
        this.setOffline()
        window.sessionStorage.clear()
        this.backflag = true
        this.$router.push('/login')
      }
    },
    // 得到自己的信息
    getSelfInfo () {
      this.$http.get('userinfo', { params: { username: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.selfInfo = res.data
        // 主要是方便其他组件获取个人的所有的信息，而不是到处传值
        sessionStorage.setItem('selfInfoall', JSON.stringify(res.data))
      })
    },
    // 修改自己的状态为离线
    setOffline () {
      this.$http.get('offline', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
      })
    },
    // 得到加新朋友的信息
    async getnewFriendFun () {
      const { data: res } = await this.$http.get('getnewfriendmsg', { params: { loginID: window.sessionStorage.getItem('selfInfo') } })
      if (res.code !== 200) this.$message.error(res.msg)
      this.addfriendmsg = res.data
      this.$message.success(res.msg)
    },
    // 得到自己的好友列表信息
    getFriendList () {
      this.$http.get('getfriend', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.friendList = res.data
        this.searchInfo = []
        this.friendHandle()
        this.groupHandle()
        this.$message.success(res.msg)
      })
    },
    // 修改当前聊天对象的数据
    reviseToUser (data) {
      this.rightShow = 'Msgbox'
      this.nowRightMenu = 'Msgbox'
      // 当前聊天对象的个人信息
      this.toUserInfo = data

      // 当前聊天对象的对话消息
      this.allMsg.forEach(element => {
        if (element.toUser === data.loginID) {
          this.toUserMsg = element.messages
        }
      })
      // 修改当前聊天对象为朋友
      this.groupOrFriendFlag = 'friend'
    },
    // 从消息列表点击
    reviseToUserFromMsg (data) {
      this.rightShow = 'Msgbox'
      this.nowRightMenu = 'Msgbox'
      // 当前聊天对象的个人信息
      this.toUserInfo = data

      // 当前聊天对象的对话消息
      this.allMsg.forEach(element => {
        if (element.toUser === data.loginID) {
          this.toUserMsg = element.messages
        }
      })

      // 修改当前聊天对象为朋友
      this.groupOrFriendFlag = 'friend'
    },
    // 请求当前账号的所有聊天对象的信息
    getAllMsg () {
      this.$http.get('getallmsg', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        // 拿到了所有的信息，传递到messagebox中进行渲染
        this.allMsg = res.data
        this.$message.success(res.msg)
      })
    },
    // 处理群相关的切换事件
    groupEvent (data) {
      this.rightShow = data
      this.nowRightMenu = data
    },
    // 得到所有的添加群的消息
    getAllAddGroupMsg () {
      this.$http.get('getAllApplyGroupMsg', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        // 拿到了所有的信息，传递到messagebox中进行渲染
        this.addGroupMsg = res.data
        this.$message.success(res.msg)
      })
    },
    // 得到所有的自己管理的群分组的消息
    getAllManageGroupData () {
      this.$http.get('getAllManageGroup', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        // 拿到了所有的信息，传递到messagebox中进行渲染
        this.groupManageData = res.data
        this.$message.success(res.msg)
      })
    },
    // 得到所有的自己管理的群分组的消息
    getAllJoinGroupData () {
      this.$http.get('getAllJoinGroup', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        // 拿到了所有的信息，传递到messagebox中进行渲染
        this.groupJoinData = res.data
        this.$message.success(res.msg)
        this.searchInfo = []
        this.friendHandle()
        this.groupHandle()
      })
    },
    // 修改当前群聊消息
    reviseToGroup (data) {
      this.rightShow = 'Msgbox'
      this.groupOrFriendFlag = 'group'
      this.toGroupInfo = data

      // 修改当前群聊对象的消息
      this.allGroupMsg.forEach(element => {
        if (element.groupID === data.groupID) {
          this.toGroupMsg = element.messages
        }
      })
    },
    // 得到所有的群聊消息
    getSelfAllGroupMsg () {
      this.$http.get('getSelfAllGroupMsg', { params: { loginID: window.sessionStorage.getItem('selfInfo') } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        // 拿到了所有的信息，传递到messagebox中进行渲染
        this.allGroupMsg = res.data
        this.$message.success(res.msg)
      })
    },
    // 结束通话后将弹窗置为false，以保证子组件动态监听生效
    endCall () {
      this.queryCallDialog = false
      this.callDialogVisible = false
    },
    // 刷新所有的message的昵称
    refreshNickname (msg) {
      // 所有群消息中的昵称改变
      this.allGroupMsg.forEach(element => {
        element.messages.forEach(e => {
          if (msg.m_FromUserID === e.m_FromUserID) {
            e.m_NickName = msg.m_NickName
          }
        })
      })

      // 当前群消息的昵称改变
      this.toGroupMsg.forEach(element => {
        if (element.m_FromUserID === msg.m_FromUserID) {
          element.m_NickName = msg.m_NickName
        }
      })
    },
    // 刷新与朋友之间的历史消息
    refreshFriendHistoryMsg (data, id) {
      // 更新全部消息中的
      this.allMsg.forEach(element => {
        if (element.toUser === id) {
          // 将数据加入
          var i = 0
          for (i = data.length - 1; i >= 0; i--) {
            element.messages.unshift(data[i])
          }
        }
      })

      // 更新当前消息
    },
    // 刷新与群之间的历史消息
    refreshGroupHistoryMsg (data, id) {
      this.allGroupMsg.forEach(element => {
        if (element.groupID === id) {
          // 将数据加入
          var i = 0
          for (i = 0; i < data.length; i++) {
            element.messages.unshift(data[i])
          }
        }
      })

      // 更新当前消息
      var i = 0
      for (i = 0; i < data.length; i++) {
        this.toUserMsg.unshift(data[i])
      }
    },
    // 创建群成功后，刷新群信息
    refreshGroup (groupID) {
      this.getAllJoinGroupData()
      this.getAllManageGroupData()
      // 在自己的消息中添加该群的空消息，解决创建群后无法发消息的bug
      var obj = {
        groupID: groupID,
        messages: []
      }
      this.allGroupMsg.push(obj)
    },
    // 对friendLit进行遍历，将信息加入到searchInfo中
    friendHandle () {
      var i, j
      console.log('friend')
      console.log(this.friendList)
      if (this.friendList != null) {
        for (i = 0; i < this.friendList.length; i++) {
          for (j = 0; j < this.friendList[i].friendInfos.length; j++) {
            console.log(this.friendList[i].friendInfos[j].nickName)
            this.searchInfo.push({
              flag: 'friend',
              value: this.friendList[i].friendInfos[j].nickName,
              loginID: this.friendList[i].friendInfos[j].loginID,
              avatar: this.friendList[i].friendInfos[j].avatar
            })
          }
        }
      }
    },
    // 对groupJoinData进行遍历，将信息加入到searchInfo中
    groupHandle () {
      var i
      if (this.groupJoinData != null) {
        for (i = 0; i < this.groupJoinData.length; i++) {
          console.log(this.groupJoinData[i].groupName)
          this.searchInfo.push({
            flag: 'group',
            value: this.groupJoinData[i].groupName,
            loginID: this.groupJoinData[i].groupID,
            avatar: this.groupJoinData[i].icon
          })
        }
      }
    },
    // searchInfo搜索
    querySearch (queryString, cb) {
      var searchInfo = this.searchInfo
      var results = queryString ? searchInfo.filter(this.createFilter(queryString)) : searchInfo
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (searchInfo) => {
        return (searchInfo.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (item) {
      if (item.flag === 'friend') {
        this.reviseToUser({
          avatar: item.avatar,
          loginID: item.loginID,
          nickName: item.value
        })
      } else if (item.flag === 'group') {
        this.reviseToGroup({
          avatar: item.avatar,
          groupID: item.loginID,
          nickName: item.value
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 外围容器
.container {
  width: 1000px;
  height: 600px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .backimg {
    width: 100%;
    height: 100%;
    background-image: url(https://wantflypig.oss-cn-beijing.aliyuncs.com/1216710774/background.jpg);
    background-size: contain;
    opacity: 0.9;
  }
}

.el-container {
  height: 100%;
}
// 搜索和添加部分
.usersearch {
  height: 50px;
  box-shadow: 0px -10px 15px 2px #9195a3;
  margin-bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;

  .searchbtn {
    cursor: pointer;
  }

  span {
    font-size: 18px;
    line-height: 50px;
    display: inline-block;
    margin-left: 8px;
    color: #989ba3;
  }
}

.chatName {
  background: hotpink;
}

.el-main {
  padding: 0;
}

.el-aside {
  overflow: hidden;
}
</style>
